<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>skiing</title>
    <!-- 引入Bootstrap.css -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <!-- 引入animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <!-- 引入全局默认样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <!-- 引入本界面样式 -->
    <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <!-- 头部导航 -->
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand wow bounceInDown" href="#">
                        <img src="./assets/images/logo.png">
                    </a>
                    <!-- 横岗部分 -->
                    <button type="button" class="navbar-toggle collapsed wow bounceInDown" data-wow-delay="100ms"
                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="wow bounceInDown" data-wow-delay="100ms"><a href="#">Shop</a></li>
                        <li class="wow bounceInDown" data-wow-delay="100ms"><a href="#">Team</a></li>
                        <li class="wow bounceInDown" data-wow-delay="150ms"><a href="#">Events</a></li>
                        <li class="wow bounceInDown" data-wow-delay="200ms"><a href="#">Experiance</a></li>
                        <li class="wow bounceInDown" data-wow-delay="250ms"><a href="#">Company</a></li>
                        <li class="wow bounceInDown" data-wow-delay="300ms"><a href="#">Contact</a></li>
                    </ul>
                </div>


                <div class="navbar-right">
                    <a class="sel wow bounceInDown" data-wow-delay="350ms" href="#"></a>
                    <a class="sea wow bounceInDown" data-wow-delay="400ms" href="#"></a>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner图 -->
    <div class="banner">
        <div class="bigbox">
            <div class="photo">
                <img src="./assets/images/slider2.jpeg" alt="">
            </div>
            <div class="slide_content">
                <div class="desc">
                    <h1 class="title">Run Over<br>Everything</h1>
                    <div class="button"><a href="#">See Details</a></div>
                </div>
            </div>
            <div class="slidePrev"><span></span></div>
            <div class="slideNext"><span></span></div>
        </div>
    </div>

    <!-- SNOWBOARDS -->
    <div class="SNOWBOARDS">
        <div class="bigbox">
            <!-- 标题 -->
            <div class="top">
                <h2>SNOWBOARDS</h2>
                <p>HENDRERIT IN VULPUTATE VELIT ESSE MOLESTIE CONSEQUAT, VEL ILLUM DOLORE</p>
                <div class="icon">
                    <i></i>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="swiper">
                <ul>
                    <li><img src="./assets/images/board1.jpeg" alt=""></li>
                    <li><img src="./assets/images/board2.jpeg" alt=""></li>
                    <li><img src="./assets/images/board3.jpeg" alt=""></li>
                    <li><img src="./assets/images/board4.jpeg" alt=""></li>
                    <li><img src="./assets/images/board1.jpeg" alt=""></li>
                    <li><img src="./assets/images/board2.jpeg" alt=""></li>
                    <li><img src="./assets/images/board3.jpeg" alt=""></li>
                    <li><img src="./assets/images/board4.jpeg" alt=""></li>
                    <li><img src="./assets/images/board1.jpeg" alt=""></li>
                    <li><img src="./assets/images/board2.jpeg" alt=""></li>
                    <li><img src="./assets/images/board3.jpeg" alt=""></li>
                    <li><img src="./assets/images/board4.jpeg" alt=""></li>
                </ul>
                <!-- 左右滑块 -->
                <div class="left"></div>
                <div class="right"></div>
            </div>
            <h3>SNOWBOARD EXTREME SERIES</h3>
        </div>
    </div>

    <!-- MOUNTAINS -->
    <div class="content-bottom">
        <div class="container">
            <div class="row content_bottom-text">
                <div class="col-md-7">
                    <h3>The Mountains<br>Snowboarding</h3>
                    <p class="m_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud
                        exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
                        vel
                        eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
                        feugiat nulla facilisis at vero eros et accumsan et iusto odio.</p>
                    <p class="m_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
                        nostrud
                        exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
                        vel
                        eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
                        feugiat nulla facilisis at vero eros et accumsan et iusto odio.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- FEATURES -->
    <div class="FEATURES">
        <div class="bigbox">
            <h2>FEATURES</h2>
            <div class="icon">
                <i></i>
            </div>
            <div class="row">
                <div class="col-md-3 item">
                    <a class="imgLink" href="#">
                        <img src="./assets/images/pic1.jpeg" alt="">
                    </a>
                    <div class="right">
                        <h3><a href="#">nostrud exerci ullamcorper</a></h3>
                        <p>claritatem insitam</p>
                    </div>
                </div>
                <div class="col-md-3 item">
                    <a class="imgLink" href="#">
                        <img src="./assets/images/pic2.jpeg" alt="">
                    </a>
                    <div class="right">
                        <h3><a href="#">nostrud exerci ullamcorper</a></h3>
                        <p>claritatem insitam</p>
                    </div>
                </div>
                <div class="col-md-3 item">
                    <a class="imgLink" href="#">
                        <img src="./assets/images/pic3.jpeg" alt="">
                    </a>
                    <div class="right">
                        <h3><a href="#">nostrud exerci ullamcorper</a></h3>
                        <p>claritatem insitam</p>
                    </div>
                </div>
                <div class="col-md-3 item">
                    <a class="imgLink" href="#">
                        <img src="./assets/images/pic4.jpeg" alt="">
                    </a>
                    <div class="right">
                        <h3><a href="#">nostrud exerci ullamcorper</a></h3>
                        <p>claritatem insitam</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="container">
            <div class="row top">
                <div class="col-md-3">
                    <h3>PRODUCTS</h3>
                    <ul>
                        <li><a href="#">Mens</a></li>
                        <li><a href="#">Womens</a></li>
                        <li><a href="#">Youth</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>ABOUT</h3>
                    <ul>
                        <li><a href="#">Careers and internships</a></li>
                        <li><a href="#">Sponserships</a></li>
                        <li><a href="#">team</a></li>
                        <li><a href="#">Catalog Request/Download</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h3>CUSTOMER SUPPORT</h3>
                    <ul>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Shipping and Order Tracking</a></li>
                        <li><a href="#">Easy Returns</a></li>
                        <li><a href="#">Warranty</a></li>
                        <li><a href="#">Replacement Binding Parts</a></li>
                    </ul>
                </div>
                <div class="col-md-3 search">
                    <h3>NEWSLETTER</h3>
                    <div class="footer_search">
                        <form>
                            <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
                            <input type="submit" value="Go">
                        </form>
                    </div>
                    <ul class="social">
                        <li class="facebook"><a href="#"><span> </span></a></li>
                        <li class="twitter"><a href="#"><span> </span></a></li>
                        <li class="instagram"><a href="#"><span> </span></a></li>
                        <li class="pinterest"><a href="#"><span> </span></a></li>
                        <li class="youtube"><a href="#"><span> </span></a></li>
                    </ul>
                </div>
            </div>
            <div class="row footer">
                <div class="col-md-6 col-sm-6 col-xs-12 copy">
                    <p>© 2014 Template by <a href="#" >w3layouts</a></p>
                </div>
                <dl id="sample" class="col-md-6 col-sm-6 col-xs-12 dropdown">
                    <dt><a href="#"><span>Change Region</span></a></dt>
                    <dd>
                        <ul>
                            <li><a href="#">Australia<img class="flag" src="./assets/images/as.png" alt=""><span class="value">AS</span></a></li>
                            <li><a href="#">Sri Lanka<img class="flag" src="./assets/images/srl.png" alt=""><span class="value">SL</span></a></li>
                            <li><a href="#">Newziland<img class="flag" src="./assets/images/nz.png" alt=""><span class="value">NZ</span></a></li>
                            <li><a href="#">Pakistan<img class="flag" src="./assets/images/pk.png" alt=""><span class="value">Pk</span></a></li>
                            <li><a href="#">United Kingdom<img class="flag" src="./assets/images/uk.png" alt=""><span class="value">UK</span></a></li>
                            <li><a href="#">United States<img class="flag" src="./assets/images/us.png" alt=""><span class="value">US</span></a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>
<!-- 引入less.js -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //懒加载初始化
    new WOW().init()
</script>